<template>
    <div class="home-container">
    <div class="summary-cards">
      <el-card class="summary-card">
        <div>今日消费</div>
        <div class="amount">¥0</div>
        <div class="details">
          <span>打赏 ¥0</span>
          <span>章节 ¥0</span>
          <span>正本 ¥0</span>
        </div>
        <div class="refresh">38秒后刷新</div>
      </el-card>
      <el-card class="summary-card">
        <div>昨日消费</div>
        <div class="amount">¥0</div>
        <div class="details">
          <span>打赏 ¥0</span>
          <span>章节 ¥0</span>
          <span>正本 ¥0</span>
        </div>
      </el-card>
      <el-card class="summary-card">
        <div>本月消费</div>
        <div class="amount">¥0</div>
        <div class="details">
          <span>打赏 ¥0</span>
          <span>章节 ¥0</span>
          <span>正本 ¥0</span>
        </div>
      </el-card>
    </div>

    <el-table  style="width: 100%" class="data-table">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="reward" label="累计打赏" />
      <el-table-column prop="contentExpense" label="内容消费" />
      <el-table-column prop="totalRecharge" label="累计充值" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
      
      />
    </div>
  </div>
</template>
<style>
.home-container {
    padding: 20px;
  }
  
  .summary-cards {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  
    .summary-card {
      width: 30%;
      text-align: center;
  
      .amount {
        font-size: 24px;
        color: #409EFF;
        margin: 10px 0;
      }
  
      .details {
        display: flex;
        justify-content: space-around;
        margin-bottom: 10px;
      }
  
      .refresh {
        color: #67C23A;
      }
    }
  }
  
  .data-table {
    margin-bottom: 20px;
  }
  
  .pagination-container {
    display: flex;
    justify-content: flex-end;
  }
  </style>